// 基本信息
<template>
  <div>
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 13 }"
    >
      <a-form-model-item ref="name" label="标题" prop="title" required>
        <a-input v-model="form.title" />
      </a-form-model-item>
      <a-form-model-item label="商品描述" prop="desc">
        <a-input v-model="form.desc" />
      </a-form-model-item>
      <a-form-model-item label="商品类目" required prop="category">
        <a-select v-model="form.category" @change="changeItem" placeholder="请选择商品类目">
          <a-select-option v-for="item in categoryList" :key="item.id" :value="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
        <a-select v-model="form.c_item" placeholder="请选择商品子类目">
          <a-select-option v-for="item in categoryItems" :key="item" :value="item">
            {{ item }}
          </a-select-option> </a-select
        >'
      </a-form-model-item>
      <a-form-model-item label="商品标签" prop="tags" required>
        <a-select
          mode="tags"
          v-model="form.tags"
          placeholder="Please select"
          :default-value="['包邮,最晚次日达']"
        >
          <a-select-option value="包邮,最晚次日达">包邮,最晚次日达</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-item class="btn">
        <a-button @click="onSumbit" type="primary">下一步</a-button>
      </a-form-item>
    </a-form-model>
  </div>
</template>

<script>
import categoryApi from '@/api/category';

export default {
  props: ['form'],
  data() {
    return {
      rules: {},
      categoryList: [],
      categoryItems: [],
    };
  },
  methods: {
    changeItem(category) {
      // 遍历总数据 判断id值是否与选择相等并且赋值
      for (let i = 0; i < this.categoryList.length; i += 1) {
        if (this.categoryList[i].id === category) {
          this.categoryItems = this.categoryList[i].c_items;
        }
      }
    },
    onSumbit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$emit('next', this.form);
          return true;
        }
        console.log('error submit!!');
        return false;
      });
    },
  },
  created() {
    categoryApi.list().then((res) => {
      this.categoryList = res.data.data.data;
    });
  },
};
</script>

<style lang="less">
.btn {
  width: 100%;
  margin-left: 25%;
}
</style>
